このページは Cloud Translation API によって翻訳されました。

ウェブの新機能

Rachel Andrew

公開日: 2025 年 5 月 20 日

Google I/O 2025 の「ウェブの新機能」基調講演では、Baseline に関するすべての発表と、今年 Baseline に追加された機能の一部を紹介しました。ウェブとベースラインにとって、2018 年は素晴らしい年でした。この投稿では、この年に言及されたすべての内容をまとめ、詳細を確認できるリンクもすべて掲載しています。

ウェブプラットフォームダッシュボードとウェブ機能

2024 年に、ウェブ特徴データセットを使用するウェブプラットフォームダッシュボードの最初のリリースを発表しました。これにより、ベースラインに含まれるすべての特徴を探索できます。

ウェブ対象物データが完成し、プラットフォームのすべての対象物がマッピングされました。毎月新しい機能がベースラインに追加されると、データが更新され、すべてダッシュボードに表示されます。

独自のベースライン目標を把握するためのツール

ブラウザサポートポリシーは、英国の代理店 Clearleft のように、ベースラインの「広く利用可能」という動的な目標に基づくことができますが、ベースラインの年に基づく固定目標を採用することもできます。独自のユーザーデータとウェブ特徴データを使用して、最適なターゲットを特定できるようになりました。

昨年の I/O で、RUMvision がプロダクトにベースラインを実装することを発表しました。この統合は現在利用可能です。

RUM データを使用するため、グローバル平均ではなく、そのデータに基づいてどのベースライン年を採用するかを特定できます。また、ベースラインの一般提供が適切かどうかを確認することもできます。

また、Google アナリティクスのデータを使用して、新しい Google アナリティクスベースラインチェッカーで、各ベースライン目標をサポートしているユーザーの割合を明確に把握することもできます。

サポート率が記載されたベースライン年のリストを表示します。 — Google アナリティクスベースラインチェッカーの出力。

これらは、実際のユーザーデータをベースラインにマッピングするのに役立つツールのほんの一部です。

Web DX コミュニティグループは最近、Netlify の拡張機能をリリースしました。この拡張機能は、さまざまなベースライン年とサイトの広範なサポートを示しており、ビルドツールでターゲットとする内容を決定するのに役立ちます。Cloudflare の Observatory RUM プロダクトと Contentsquare との統合は近日提供予定です。

データを独自のツールと統合する

ウェブ特徴データはオープンで、独自の統合に使用できます。Google は、この作業を簡単に行えるように取り組んでいます。

Web Platform Dashboard API を使用するか、npm パッケージからウェブ特徴データを直接使用します。

W3C WebDX コミュニティグループの baseline-browser-mapping モジュールを使用して、ブラウザバージョンをベースラインターゲットにマッピングできるようになりました。このモジュールは、サーバーサイドの JavaScript 環境で使用することも、リポジトリから毎日更新される JSON ファイルまたは CSV ファイルをダウンロードして使用することもできます。

このデータには、コアベースラインブラウザセットだけでなく、Samsung Internet、Opera、UC Browser、Android Webview などのダウンストリームブラウザのマッピングも含まれています。

ベースラインターゲットで機能がサポートされているかどうかを確認する

ベースライン情報は、MDN と Can I Use のほとんどのページに掲載されています。また、ウェブプラットフォームダッシュボード、web.dev の記事、CSS Tricks の記事でも確認できます。ただし、これらすべてはサポートを調べる必要があります。コードを記述するときに IDE にベースライン情報が表示され、使用している他のすべてのツールの一部として表示されれば、はるかに便利です。

多くの主要なツールにベースラインのサポートが組み込まれているか、簡単に統合できるようになりました。

`browserslist-config-baseline`

Babel や PostCSS などの多くのツールは、browserslist を使用してサポートするブラウザを決定します。

Chrome チームは、WebDX CG とコミュニティのメンバーとともに、browserslist-config-baseline という新しいツールのリリースを支援しました。これにより、ブラウザリストのターゲットを、広く利用可能、ベースライン年などのベースラインの用語で構成できます。

これにより、browserslist ターゲットを受け取るツールは、ベースラインの用語で表現できるようになりました。

詳細については、browserslist でベースラインを使用するをご覧ください。

lint のベースライン - ESLint と Stylelint

最近、CSS 用 ESLint をはじめとする、新しい lint ツールの登場により、Baseline と lint の併用が可能になりました。

ベースライン ESLint には use-baseline ルールがあります。この値は、任意のベースラインターゲットに設定できます。ターゲットより新しい機能を使用すると、警告が表示されます。これらの警告を解決する方法は、その機能をプリミティブに置き換えるか、リンターの警告を抑制するかを選択できます。これは、最先端の機能を安全に使用していることがわかっている場合（たとえば、段階的な拡張機能の場合）に、完全に有効なソリューションです。

デフォルトでは、サポートされていないブラウザでは評価されないため、@supports ブロック内で新しい機能が使用されている場合、ESLint は警告しません。

HTML リンティングが必要な場合は、html-eslint というコミュニティプラグインもあります。

Stylelint は、stylelint-plugin-use-baseline というプラグインを公式にサポートしています。このルールは CSS の ESLint ルールと同じように動作しますが、代わりに Stylelint で実行されます。

多くのリンタには IDE プラグインも用意されているため、コードを記述する際に波線で下線を引くことで、ベースラインのステータスに関するフィードバックをすぐに確認できます。

VSCode で使用される ESLint プラグイン。ベースラインターゲット外の特徴に下線が表示されています。 — VSCode で使用される ESLint プラグイン。

VS Code と JetBrains WebStorm のベースライン

多くの IDE では、エディタ内の機能にカーソルを合わせると、サポートされているブラウザバージョンのリストが表示される機能が長い間サポートされています。

ただし、その機能が実際に安全に使用できるかどうかを理解するのは非常に困難です。そのリストに主要なブラウザが含まれていないかどうか、そのブラウザのバージョンがどれくらい新しいかを頭の中で解析する必要があります。

この問題を解決するため、Google は数百万人のウェブデベロッパーが使用している最も一般的な IDE である VS Code と提携し、ベースラインデータをこれらのホバーカードに直接統合しました。

機能にカーソルを合わせると、その機能がベースラインと見なされるかどうか、ベースラインと見なされる期間、まだ完全に実装されていない主要なブラウザがあるかどうかが示されます。

ベースラインのステータスが表示された VSCode のホバーカード。 — VSCode ホバーカードの統合。

サポートされている機能には、CSS プロパティ、HTML 要素、HTML 属性などがあります。詳しくは、Visual Studio Code でベースラインがサポートされるようになりましたをご覧ください。

この統合により、VS Code ベースの IDE でもこれらのホバーカードを利用できるようになります。

また、JetBrains が WebStorm JavaScript と TypeScript IDE にホバーカードを実装することも発表できます。

ウェブはかつてない速さで進化しています

相互運用性のあるウェブがかつてない速さで進化していることを、Baseline で活用していただければ幸いです。

ウェブプラットフォームダッシュボードを使用すると、Google I/O 2024 以降の過去 12 か月にベースラインの新規機能として利用可能になったすべての機能を確認できます。

また、Interop 2025 プロジェクトに含まれているため、まもなくベースラインとして利用可能になる機能もいくつかあります。含まれるすべての機能については、Interop2025: ウェブプラットフォームの改善のもう一年をご覧ください。

横書きモード

Browser Support

すでに、CSS writing-mode プロパティの sideways-rl 値と sideways-lr 値がベースラインの新規利用可能機能になっています。縦書きモードを純粋にレイアウト目的で使用している場合は、横向きの値が適しています。

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

アンカーの配置

Browser Support

Source

アンカーの配置は Chrome 125 でリリースされました。ボタンでツールチップを開く場合など、要素の位置をアンカーに結び付けることができます。

Interop 2025 に含まれるようになったため、今年中にベースラインに追加される予定です。

Core Web Vitals: LCP と INP

LCP API

Browser Support

Source

Event Timing API（INP 用）

Browser Support

Source

Web Vitals は、サイトのエクスペリエンスを数値化し、改善の機会を特定するのに役立ちます。ウェブバイタルイニシアチブは、状況を簡素化し、サイトが最も重要な指標であるウェブに関する主な指標に集中できるようにすることを目的としています。

Interop 2025 には、LargestContentfulPaint API と Event Timing API をすべてのブラウザに実装することで、Largest Contentful Paint（LCP）と Interaction to Next Paint（INP）の指標が含まれています。

`<details>` 要素の機能強化

<details> 要素自体は、すでにベースラインで広く利用可能です。<details> を使用した開示ウィジェットをより便利にする機能がいくつかあるため、Interop 2025 に追加されました。

<details> 要素には <summary> 要素が含まれます。これは、<details> 要素が閉じられているときにページに表示される部分です。<summary> の外側にある <details> 要素のコンテンツは、ユーザーが概要をクリックするまで非表示になります。

Interop 2025 で相互運用性が確保される機能の 1 つは、display ではなく content-visibility を使用してコンテンツを非表示にすることです。つまり、展開しないとコンテンツがまったくレンダリングされなくなります。

::marker 疑似要素も Interop 2025 の作業の一部です。::marker 疑似要素を使用すると、<summary> 要素の開閉三角形のスタイルを設定できます。

Browser Support

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

次に、別の疑似要素 ::details-content を追加します。

Browser Support

Source

::details-content はコンテンツを表します。これは、展開と折りたたみが可能で、スタイルを設定できる details 要素の部分です。

[open]::details-content {
  border: 5px dashed hotpink;
}

また、ページ内検索の一致で <details> 要素を自動的に展開したり、HTML hidden 属性の until-found 値をベースラインの「新規に利用可能」にしたりといった、便利な改善もいくつかあります。これにより、ブラウザのページ内検索を使用して要素が検出されるまで、または URL フラグメントに沿って直接移動されるまで、要素が非表示になります。

CSS `@scope`

Browser Support

Source

CSS @scope ルールを使用すると、セレクタの範囲を制限できます。@scope でスコープルートを設定すると、at ルール内にネストされたスタイルルールはその DOM ツリーにのみ適用されます。

たとえば、クラスが .card の要素内の <img> 要素のみをターゲットにする場合、.card がスコープルートになります。

@scope (.card) {
    img {
        border-color: green;
    }
}

詳しくは、CSS @scope アットルールを使用してセレクタの範囲を制限するをご覧ください。

`scrollend`

Browser Support

Source

複雑さを軽減し、スクロールインターフェースを改善するもう 1 つの機能は scrollend です。scrollend イベントがないと、スクロールが完了したことを検出する信頼できる方法はありません。

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend イベントを使用すると、ブラウザが複雑な評価をすべて行います。

document.onscrollend = event => {…}

その他の例については、Scrollend、新しい JavaScript イベントをご覧ください。

同じドキュメント内のビューの遷移

Browser Support

Source

最後に、ビュー遷移は Interop 2025 の一部です。この作業には、同じドキュメント内のビュー遷移（シングルページアプリのビュー遷移とビュー遷移クラス）が含まれます。

Interop 2025 ダッシュボードで、年が進むにつれてプロジェクトがどのように進展しているかを確認できます。

今年のベースラインに含まれるのは Interop 2025 に含まれる機能だけではありません。これらの機能がプロジェクトに含まれることは、優先度が高く、まもなくリリースされることを示す非常に良い兆候です。

まだ始まったばかりです

今年は Baseline にとってエキサイティングな年でした。昨年のお知らせから大きく進歩しました。これで、ウェブ特徴データのバックフィルが完了しました。これにより、デベロッパーツールを作成できるようになりました。まだ始まったばかりの取り組みですが、このデータが役立つプロダクトやオープンソースツールをお持ちの場合は、ぜひお知らせください。

web.dev をぜひご活用ください。ウェブのあらゆる機能を活用できるよう、新しいツールに関するお知らせやチュートリアルを今後も公開していきます。

ウェブの新機能

ウェブ プラットフォーム ダッシュボードとウェブ機能

独自のベースライン目標を把握するためのツール

データを独自のツールと統合する

ベースライン ターゲットで機能がサポートされているかどうかを確認する

browserslist-config-baseline

lint のベースライン - ESLint と Stylelint

VS Code と JetBrains WebStorm のベースライン

ウェブはかつてない速さで進化しています

横書きモード

アンカーの配置

Core Web Vitals: LCP と INP

LCP API

Event Timing API（INP 用）

<details> 要素の機能強化

CSS @scope

scrollend

同じドキュメント内のビューの遷移

まだ始まったばかりです

ウェブプラットフォームダッシュボードとウェブ機能

ベースラインターゲットで機能がサポートされているかどうかを確認する

`browserslist-config-baseline`

`<details>` 要素の機能強化

CSS `@scope`

`scrollend`